<template>
    <!-- <el-menu router :default-active="$route.path">
        <el-menu-item index="/home">
            <i class="el-icon-message"></i>首页
        </el-menu-item>
        <el-submenu index="/pro">
            <template slot="title"><i class="el-icon-message"></i>商品管理</template>
            <el-menu-item index="/pro/list">商品列表</el-menu-item>
            <el-menu-item index="/pro/search">商品搜索</el-menu-item>
        </el-submenu>
        <el-submenu index="/banner">
            <template slot="title"><i class="el-icon-message"></i>轮播管理</template>
            <el-menu-item index="/banner/list">轮播列表</el-menu-item>
            <el-menu-item index="/banner/show">轮播展示</el-menu-item>
            <el-menu-item index="/banner/add">轮播新增</el-menu-item>
        </el-submenu>
    </el-menu> -->
    <el-menu router :default-active="$route.path" :unique-opened="true">
        <template v-for="menu in authorityMenus">
            <!-- 一级菜单 => 没有children -->
            <el-menu-item :index="menu.path" :key="menu.name" v-if="!menu.children"><i :class="menu.icon"></i>{{ menu.label
            }}</el-menu-item>
            <!-- 一级菜单 => 有children -->
            <el-submenu :index="menu.path" :key="menu.name" v-else>
                <template slot="title"><i :class="menu.icon"></i>{{ menu.label }}</template>
                <!-- 生成二级菜单 -->
                <el-menu-item v-for="subMenu in menu.children" :key="subMenu.name" :index="subMenu.path">{{ subMenu.label
                }}</el-menu-item>
            </el-submenu>
        </template>
    </el-menu>
</template>

<script>
import { menus } from "@/router/routes";
import { mapGetters } from "vuex";
export default {
    name: "AsideMenuView",
    data() {
        return {
            menus, //引入menus 挂载到data中
        }
    },
    computed: {
        ...mapGetters(["authorityMenus"]),
    },
    mounted() {
        console.log("menus", JSON.parse(JSON.stringify(this.menus)));
    },
   
}
</script>

<style lang="scss" scoped></style>